<template>
    <div>
        <home-header :nav="nav" :logo="logoInfo"></home-header>
        <public-top :title="aeticleInfo.title"></public-top>
        <main class="main-box">
            <section class="content-box">
                <div class="content-left">
                    <article-item :article="articleList"></article-item>
                    <div class="more" v-if="isShowMore">加载中</div>
                    <div v-if="articleList.data && articleList.data.length < 5 && moreArticleList.data">
                        <div class="more-title">更多文章</div>
                        <article-item :article="moreArticleList"></article-item>
                    </div>
                </div>
                <div class="content-right" :style="rightStyle">
                    <user-info :userInfo="userInfo"></user-info>
                    <my-label :labels="labels"></my-label>
                    <wbrs :wbrs="wbrs"></wbrs>
                </div>
            </section>
        </main>
        <public-footer :userInfo="logoInfo" :links="links"></public-footer>
        <scoll-top></scoll-top>
    </div>
</template>
<script>
import HomeHeader from '~/components/home-header/index.vue';
import publicFooter from "~/components/public-footer/index.vue";
import userInfo from "~/components/user-info/index.vue";
import myLabel from "~/components/my-label/index.vue";
import wbrs from "~/components/wbrs/index.vue";
import scollTop from "~/components/scoll-top/index.vue";
import publicTop from "~/components/public-top/index.vue";
import articleItem from "~/components/article-item/index.vue";
import request from '~/request/request';
import baiduPush from '../../utils/baidupush';
import mixins from '~/mixins/mixins';
export default {
    name: 'Detals',
    async asyncData({ params, app }) {
        try {
            let nav = await request('/api/index/getNav');
            let logoInfo = await request('/api/index/getBlogTitle');
            let links = await request('/api/index/getLink');
            let userInfo = await request('/api/index/getMyUserInfo');
            let labels = await request('/api/index/getMyLable');
            let wbrs = await request('/api/index/getHotSearch');
            let articleList = await request(`/api/article/getArticleByClassifyId?ID=${params.id}&page=1&pageSize=10`);
            let moreArticleList = {};
            if (articleList.data.data && articleList.data.data.length < 5) {
                moreArticleList = await request('/api/article/getArticleAll?page=1&pageSize=3');
            }
            if (articleList.data.data.length) {
                app.head.title = articleList.data.data[0].typeName;
            }
            app.head.meta.push({ name: 'keywords', content:'zs.duan的个人博客,' + articleList.data.data[0].typeName }, { name: 'description', content:  'zs.duan的个人博客,' + articleList.data.data[0].typeName })
            return {
                nav: nav.data,
                logoInfo: logoInfo.data,
                links: links.data,
                userInfo: userInfo.data,
                labels: labels.data,
                wbrs: wbrs.data,
                articleList: articleList.data,
                moreArticleList: moreArticleList.data || {},
                aeticleInfo: {
                    title: articleList.data.data[0].typeName || ''
                }
            }
        } catch (error) {
            return {}
        }
    },
    components: {
        HomeHeader,
        publicFooter,
        userInfo,
        myLabel,
        wbrs,
        scollTop,
        publicTop,
        articleItem
    },
    mixins: [mixins],
    data() {
        return {
            nav: [],
            logoInfo: {},
            links: [],
            userInfo: {},
            labels: [],
            wbrs: [],
            articleList: {},
            moreArticleList: {},
            aeticleInfo: {
                title: '',
            },
            page: 1,
            pageSize: 10
        }
    },
    computed: {
        isShowMore() {
            return this.articleList.data && this.articleList.data.length !== this.articleList.count && this.articleList.data.length >= 5;
        }
    },
    mounted() {
        baiduPush();
    },
    methods: {
        /**加载更多*/
        async loadMore() {
            this.page++;
            let res = await request(`/api/article/getArticleByClassifyId?ID=${this.$route.params.id}&page=${this.page}&pageSize=${this.pageSize}`);
            this.articleList.data = this.articleList.data.concat(res.data.data);
        },
        /**加载更多出现 去请求加载更多*/
        showMoreShow() {
            let dom = document.querySelector('.more');
            const observer = new IntersectionObserver((entries) => {
                if (entries[0].isIntersecting) {
                    this.loadMore();
                }
            });
            observer.observe(dom);
        }

    },
}
</script>
<style lang="scss" scoped>
.main-box {
    width: 100%;
    background-color: #F8F9FB;
    position: relative;
    z-index: 2;

    .content-box {
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        position: relative;
        padding: 20px;

        .content-left {
            width: 79%;

            .more-title {
                font-size: 20px;
                color: #333;
                margin-bottom: 20px;
            }
        }

        .content-right {
            width: 20%;
        }

        .content-right-fixed {
            position: fixed;
            top: -170px;
        }

    }

    @media screen and (max-width: 768px) {
        .content-box {
            display: block;
            box-sizing: border-box;
            padding: 0;

            .content-left {
                width: 100%;
                .more-title {
                    font-size: 16px;
                    margin-bottom: 10px;
                    padding-left: 10px;
                }
            }

            .content-right {
                display: none;
            }
        }
    }
}
</style>